<template>
  <div>
    <component :is="cut" @closePane="closePane"></component>
    <ul class="navul">
      <ul v-if="navulShow">
        <li v-for="(item,index) in menus" :key="index">
          {{item.title}}
          <i v-if="item.childs.length!=0" class="fa fa-arrows-h"></i>
          <i v-if="item.childs.length!=0" class="fa fa-angle-right"></i>
          <ul v-if="item.childs.length!=0">
            <li  @click="cliclicked(itemsub)" v-for="(itemsub,indexsub) in item.childs" :key="indexsub">
              {{itemsub.title}}
            </li>
          </ul>
        </li>
      </ul>
    </ul>
    <div class="navmenu">
      <i @click="navulShow=!navulShow" class="fa fa-th-large fa-3x"></i>
    </div>
  </div>
</template>

<script>
  import 'font-awesome/css/font-awesome.css'
  import '@/assets/nav-horizontal/normalize.css'
  import HDMeasurement from '@/components/Measurement/HDMeasurement'
  import VDMeasurement from '@/components/Measurement/VDMeasurement'
  import SpaceDMeasurement from '@/components/Measurement/SpaceDMeasurement'
  import SphericalDMeasurement from '@/components/Measurement/SphericalDMeasurement'
  import layerFn from '@/components/menu/LayerFn'
  import AnalysisResultEchartLine from '@/components/Analysis/AnalysisResultEchartLine'
  import Point from '@/components/Plotting/Point'
  import ThreeDimensional from '@/components/Plotting/ThreeDimensional'
  import TwoDimensional from '@/components/Plotting/TwoDimensional'
  import PropertySel from '@/components/Select/PropertySel'

  export default {
    name: "nav",
    data(){
      return{
        navulShow:false,
        cut:null,
        menus:[
          {title:'图层',icon:'',class:'',tag:'layerFn',active:false,childs:[]},
          {title:'量测',icon:'',class:'',tag:'',active:false,childs:[
              {title:'空间距离测量',icon:'',tag:'SpaceDMeasurement'},
              {title:'水平距离测量',icon:'',tag:'HDMeasurement'},
              {title:'垂直高度测量',icon:'',tag:'VDMeasurement'},
              {title:'球面距离测量',icon:'',tag:'SphericalDMeasurement'},
              {title:'三维表面面积测量',icon:'',tag:''},
              {title:'平面面积测量',icon:'',tag:''},
              {title:'体积方量测量',icon:'',tag:''},
              {title:'角度测量',icon:'',tag:''}
            ]},
          {title:'分析',icon:'',class:'',tag:'',active:false,childs:[
              {title:'等高线分析',icon:'',tag:''},
              {title:'坡度分析',icon:'',tag:''},
              {title:'最佳路径分析',icon:'',tag:''},
              {title:'地形剖面分析',icon:'',tag:'AnalysisResultEchartLine'},
              {title:'洪水淹没分析',icon:'',tag:''},
              {title:'通视分析',icon:'',tag:''},
              {title:'视域分析',icon:'',tag:''},
              {title:'空间分析',icon:'',tag:''},
              {title:'阴影分析',icon:'',tag:''}
            ]},
          {title:'场景',icon:'',class:'',tag:'',active:false,childs:[
              {title:'浏览方式',icon:'',tag:''},
              {title:'浏览边界',icon:'',tag:''},
              {title:'室内模式',icon:'',tag:''},
              {title:'二三维联动',icon:'',tag:''},
              {title:'特效',icon:'',tag:''},
              {title:'街景',icon:'',tag:''},
              {title:'地下模式',icon:'',tag:''},
              {title:'图层高程夸张显示',icon:'',tag:''}
            ]},
          {title:'标绘',icon:'',class:'',tag:'',active:false,childs:[
              {title:'点',icon:'',tag:'Point'},
              {title:'二维平面',icon:'',tag:'TwoDimensional'},
              {title:'三维立体',icon:'',tag:'ThreeDimensional'},
            ]},
          {title:'时间轴',icon:'',class:'',tag:'',active:false,childs:[
              {title:'暂停',icon:'',tag:''},
              {title:'快进',icon:'',tag:''},
              {title:'快退',icon:'',tag:''},
              {title:'时间倍率',icon:'',tag:''},
              {title:'指定时间',icon:'',tag:''}
            ]},
          {title:'查询',icon:'',class:'',tag:'',active:false,childs:[
              {title:'空间查询',icon:'',tag:''},
              {title:'临近查询',icon:'',tag:''},
              {title:'全文属性查询',icon:'',tag:'PropertySel'},
              {title:'混合条件查询',icon:'',tag:''}
            ]},
          {title:'工具',icon:'',class:'',tag:'',active:false,childs:[
              {title:'放大',icon:'',tag:''},
              {title:'缩小',icon:'',tag:''},
              {title:'指北',icon:'',tag:''}
            ]},
        ]
      }
    },
    components:{
      'HDMeasurement':HDMeasurement,
      'VDMeasurement':VDMeasurement,
      'SpaceDMeasurement':SpaceDMeasurement,
      'SphericalDMeasurement':SphericalDMeasurement,
      'AnalysisResultEchartLine':AnalysisResultEchartLine,
      'Point':Point,
      'PropertySel':PropertySel,
      'TwoDimensional':TwoDimensional,
      'ThreeDimensional':ThreeDimensional,
    },
    methods:{
      cliclicked(item){
        this.cut=item.tag;
        this.navulShow=false;
      },
      closePane(){
        this.cut=null;
      }
    },
    mounted(){
      this.$nextTick(function () {
      })
    }
  }
</script>

<style scoped>
  .navmenu{
    width: 100px;
    height: 100px;
    color: #00B83F;
    text-align: center;
    line-height: 120px;
  }
  ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
    background-color: rgba(45,52,68,.8);
  }
  ul li{
    padding-left: 25px;
    color: white;
    height: 36px;
    line-height: 38px;
    font-size: 12px;
    border-bottom:1px solid rgba(65,62,68,.9);
  }
  .navul{
    width: 120px;
    position: absolute;
    left: 10px;
    bottom: 80px;
  }
  .navul li ul{
    display: none;
    position: absolute;
    left: 135px;
    width: 126px;
    bottom: 20px;
  }
  .navul li:hover{
    background-color: rgba(0,184,63,.6);
  }
  .navul li:hover ul{
    display: block;
  }
  .navul li:hover i.fa-arrows-h{
    display: block;
  }
  .navul li .fa-angle-right{
    padding-top: 13px;
    padding-right: 15px;
    float: right;
  }
  .navul li .fa-arrows-h{
    display: none;
    padding-top: 13px;
    margin-right: -14px;
    float: right;
    color: #00B83F;
  }
</style>
